import React from "react";
import {Flex} from "antd";
import "./ChatView.css";
import MessageCard from "@/components/Chat/MessageCard.jsx";

/**
 *
 * @param {Array} messages
 * @returns {Element}
 * @constructor
 */
export function ChatView({messages}) {
  return (
    <Flex
      className="scrollable-content"
      vertical={true}
      style={{flex: 1, width: "100%"}}
    >
      {messages.length === 0 ? (
        <div
          style={{
            color: "#aaa",
            textAlign: "center",
            marginTop: "40px",
            width: "100%",
          }}
        >
          暂无消息，开始对话吧！
        </div>
      ) : (
        messages.map((msg, index) => (
          <MessageCard
            key={index}
            message={msg.content}
            type={msg.role}
            analysis={msg.analysis}
          />
        ))
      )}
    </Flex>
  );
}

export default ChatView;
